<!--填报课程考核实施计划-->
<template>
  <div class="paperprint-container" style="width: 100% !important;">
    <div class="search-container" style="    margin-top: 0px;padding-left:0px">
      <div class="search-container-left" style="    margin-bottom: 0px">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xq"
            style="width: 91px"
            size="mini"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>培养层次：</span>
          <el-select
            v-model="level"
            style="width: 80px"
            size="mini"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in ppccList"
              :key="item.value"
               :label="item.dictValue"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>修习类型：</span>
          <el-select
            v-model="xxtype"
            style="width: 80px"
            size="mini"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in xxlxList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>课程名称：</span>
          <el-input
            style="width: 152px"
            size="mini"
            placeholder="请输入课程名称"
            v-model="course"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>课程负责人：</span>
          <el-input
            style="width: 152px"
            size="mini"
            placeholder="请输入课程负责人"
            v-model="coursecharge"
          ></el-input>

        </div>
        <!-- <div style="margin-top:3px">
         <el-button icon="el-icon-search" type="primary" size="mini" @click="querySelPrint"
            >查询</el-button>
        </div> -->
        <div class="search-button" @click="querySelPrint" style="margin:2px 0 0 0">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span>查询</span>
        </div>
      </div>
      <div class="search-container-right">
        <!-- <div >
          <xpaas-print-single :checkedPapers="checkedForBatchPrint" componentType="print" @printAllCheckted="handlePrintAllChecked" />
        </div> -->
        <!--
        <div style="margin-left:20px">
          <el-button icon="el-icon-download" size="mini" type="warning" @click="exportClick">导出</el-button> 
        </div>
        -->
      </div>
    </div>

    <div class="table-container" style="margin-top:20px">
      <div class="table-header">
        <div class="item" style="width: 67px">
          <el-checkbox
            v-model="rowColumnChecked"
            @change="selectCheck2('all')"
          ></el-checkbox>
        </div>
        <div class="item" style="width: 97px">课程编号</div>
        <div class="item" style="width: 106px">课程名称</div>
        <div class="item" style="width: 114px">课程负责人</div>
        <div class="item" style="width: 123px">
          <el-checkbox
            v-model="sjcfmColumnChecked"
            @change="selectCheck2('sjcfm')"
          ></el-checkbox
          >
          <span>试卷册封面</span>
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox
            v-model="kckhColumnChecked"
            @change="selectCheck2('kckh')"
          ></el-checkbox>
          <div>
            <div>课程考核</div>
            <div>实施计划</div>
          </div>
        </div>
        <div class="item" style="width: 119px">
          <el-checkbox
            v-model="mtjhColumnChecked"
            @change="selectCheck2('mtjh')"
          ></el-checkbox
          >
          <span>命题计划</span>
        </div>
        <div class="item" style="width: 136px">
          <el-checkbox
            v-model="kcdjbColumnChecked"
            @change="selectCheck2('kcdjb')"
          ></el-checkbox
          >
          <span>考场登记表</span>
        </div>
        <div class="item" style="width: 111px">
          <el-checkbox
            v-model="sycpColumnChecked"
            @change="selectCheck2('sycp')"
          ></el-checkbox
          >
          <span>送印传票</span>
        </div>
        <div class="item" style="width: 124px">
          <el-checkbox
            v-model="sjdfpColumnChecked"
            @change="selectCheck2('sjdfp')"
          ></el-checkbox
          >
          <span>试卷袋封皮</span>
        </div>
        <div class="item" style="width: 101px">
          <!-- <el-checkbox
            v-model="abjColumnChecked"
            @change="selectCheck2('abj')"
          ></el-checkbox
          > -->
          <span>AB卷</span>
        </div>
        <div class="item" style="width: 155px">
          <!-- <el-checkbox
            v-model="daColumnChecked"
            @change="selectCheck2('da')"
          ></el-checkbox
          > -->
          <span>答案及评分标准</span>
        </div>
        <div class="item" style="width: 116px">
          <!-- <el-checkbox
            v-model="dtjColumnChecked"
            @change="selectCheck2('dtj')"
          ></el-checkbox
          > -->
          <span>答题卷</span>
        </div>
        <div class="item" style="width: 145px">
          <el-checkbox
            v-model="ksfxbColumnChecked"
            @change="selectCheck2('ksfxb')"
          ></el-checkbox
          >
          <span>试卷分析表</span>
        </div>
        <div class="item" style="width: 131px">
          <el-checkbox
            v-model="zpcjdColumnChecked"
            @change="selectCheck2('zpcjd')"
          ></el-checkbox
          >
          <span>总评成绩单</span>
        </div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item" style="width: 67px">
          <el-checkbox v-model="item.rowChecked" @change="itemChange2('row',index)" />
        </div>
        <div class="item" style="width: 97px">{{ item.courseno }}</div>
        <div class="item" style="width: 106px">{{ item.coursename }}</div>
        <div class="item" style="width: 114px">{{ item.coursecharge }}</div>
        <div class="item" style="width: 123px">
          <el-checkbox v-model="item.sjcfmChecked" @change="itemChange2('sjcfm',index)" />
          <xpaas-print-single :singleCourseInfo="item" printType="sjcfm" componentType="preview" /><!-- 试卷册封面 -->
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox v-model="item.kckhChecked" @change="itemChange2('kckh',index)" />
          <xpaas-print-single :singleCourseInfo="item" printType="kckh" componentType="preview" />
          <!-- 课程考核实施计划 -->
        </div>
        <div class="item" style="width: 119px">
          <el-checkbox v-model="item.mtjhChecked" @change="itemChange2('mtjh',index)" />
          <xpaas-print-single :singleCourseInfo="item" printType="mtjh" componentType="preview" />
          <!-- 命题计划 -->
        </div>
        <div class="item" style="width: 136px">
          <el-checkbox v-model="item.kcdjbChecked" @change="itemChange2('kcdjb',index)" />
          <xpaas-print-single :singleCourseInfo="item" printType="kcdjb" componentType="preview" />
          <!-- 考场登记表 -->
        </div>
        <div class="item" style="width: 111px">
          <el-checkbox v-model="item.sycpChecked" @change="itemChange2('sycp',index)" />
          <xpaas-print-single :singleCourseInfo="item" printType="sycp" componentType="preview" />
          <!-- 送印传票 -->
        </div>
        <div class="item" style="width: 124px">
          <el-checkbox v-model="item.sjdfpChecked" @change="itemChange2('sjdfp',index)" />
          <xpaas-print-single :singleCourseInfo="item" printType="sjdfp" componentType="preview" />
          <!-- 试卷袋封皮 -->
        </div>
        <div class="item" style="width: 101px"><!-- AB卷 -->
          <!-- <el-checkbox v-model="item.abjChecked" @change="itemChange2('abj',index)" /> -->
          <el-button @click="itemClick('abj',index)" type="primary" size="mini">预览</el-button>
        </div>
        <div class="item" style="width: 155px"><!-- 答案及评分标准 -->
          <!-- <el-checkbox v-model="item.daChecked" @change="itemChange2('da',index)" /> -->
          <el-button @click="itemClick('da',index)" type="primary" size="mini">预览</el-button>
        </div>
        <div class="item" style="width: 116px"><!-- 答题卷 -->
          <!-- <el-checkbox v-model="item.dtjChecked" @change="itemChange2('dtj',index)" /> -->
          <el-button @click="itemClick('dtj',index)" type="primary" size="mini">预览</el-button>
        </div>
        <div class="item" style="width: 145px">
          <el-checkbox v-model="item.ksfxbChecked" @change="itemChange2('ksfxb',index)" />
          <xpaas-print-single :singleCourseInfo="item" printType="ksfxb" componentType="preview" />
          <!-- 试卷分析表 -->
        </div>
        <div class="item" style="width: 131px">
          <el-checkbox v-model="item.zpcjdChecked" @change="itemChange2('zpcjd',index)" />
          <xpaas-print-single :singleCourseInfo="item" printType="zpcjd" componentType="preview" />
          <!-- 总评成绩单 -->
        </div>
      </div>
    </div>

  <el-dialog :title="previewDialogTitle" :visible.sync="previewDialogVisible">
    <div v-if="'abj' == this.previewDialogType">
    <!-- AB卷 -->
      <el-button type="primary" @click="handleDialogPreviewClick('sja')">预览 A卷</el-button>
      <el-button type="primary" @click="handleDialogPreviewClick('sjb')">预览 B卷</el-button>
    </div><div v-else-if="'da' == this.previewDialogType">
    <!-- 答案及评分标准 -->
    <el-button type="primary" @click="handleDialogPreviewClick('dajpfbz')">预览 答案及评分标准</el-button>
    </div><div v-else-if="'dtj' == this.previewDialogType">
    <!-- 答题卷 -->
      <el-button type="primary" @click="handleDialogPreviewClick('dtja')">预览 A卷-答题卷</el-button>
      <el-button type="primary" @click="handleDialogPreviewClick('dtjb')">预览 B卷-答题卷</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import { getSelectConditionPrint } from "@/api/paperPrint/paperPrint";
import { pyccselect } from "@/api/professional/details";
import { reqGetXqList } from "../../../api/classHoursAddList/addList";
import PrintSingle from "./templates/PrintSingle.vue"; // 打印

export default {
  components: {
    "xpaas-print-single": PrintSingle
  },
  data() {
    return {
      course: "",
      xq: "",
      xqList: [
      ],
      level: "",
      ppccList: [
      ],
      xxtype: "",
      xxlxList: [
        {
          value: "选修",
          label: "选修",
        },
        {
          value: "必修",
          label: "必修",
        },
      ],
      kcfzr: "",
      kcfzrList: [],
      rowColumnChecked: false,
      sjcfmColumnChecked: false,
      kckhColumnChecked: false,
      mtjhColumnChecked: false,
      kcdjbColumnChecked: false,
      sycpColumnChecked: false,
      sjdfpColumnChecked: false,
      abjColumnChecked: false,
      daColumnChecked: false,
      dtjColumnChecked: false,
      zpcjdColumnChecked: false,
      ksfxbColumnChecked: false,
      coursecharge: '',
      tableData: [],
      filepath: "",
      checkedForBatchPrint: {
        checkedTotal: 0,
        sjcfm: [],
        kckh: [],
        mtjh: [],
        kcdjb: [],
        sycp: [],
        sjdfp: [],
        ksfxb: [],
        zpcjd: [],
        abj: [],
        da: [],
        dtj: []
      },
      previewDialogTitle: "",
      previewDialogVisible: false,
      previewDialogType: "",
      currentDialogModel: {}
    };
  },
  created() {
    this.getXqList();
    this.pyccselect();
    this.querySelPrint();
  },
  watch: {
    rowColumnChecked: {
      deep: true,
      handler() {
        this.tableData = this.tableData.map((item) => {
          return {...item, rowChecked: this.rowColumnChecked};
        });
      }
    },
  },
  methods: {
    handlePrintAllChecked(val) {
      let tmpCheckedForBatchPrint = {};
      tmpCheckedForBatchPrint.checkedTotal = 0;
      tmpCheckedForBatchPrint.sjcfm = [];
      tmpCheckedForBatchPrint.kckh = [];
      tmpCheckedForBatchPrint.mtjh = [];
      tmpCheckedForBatchPrint.kcdjb = [];
      tmpCheckedForBatchPrint.sycp = [];
      tmpCheckedForBatchPrint.sjdfp = [];
      tmpCheckedForBatchPrint.ksfxb = [];
      tmpCheckedForBatchPrint.zpcjd = [];
      tmpCheckedForBatchPrint.abj = [];
      tmpCheckedForBatchPrint.da = [];
      tmpCheckedForBatchPrint.dtj = [];

      for (const x of this.tableData) {
        // console.log("abjChecked =>", x.abjChecked);
        if (true == x.abjChecked) {
          tmpCheckedForBatchPrint.abj.push(x);
        }
        // console.log("daChecked =>", x.daChecked);
        if (true == x.daChecked) {
          tmpCheckedForBatchPrint.da.push(x);
        }
        // console.log("dtjChecked =>", x.dtjChecked);
        if (true == x.dtjChecked) {
          tmpCheckedForBatchPrint.dtj.push(x);
        }
        // console.log("kcdjbChecked =>", x.kcdjbChecked);
        if (true == x.kcdjbChecked) {
          tmpCheckedForBatchPrint.kcdjb.push(x);
        }
        // console.log("kckhChecked =>", x.kckhChecked);
        if (true == x.kckhChecked) {
          x.xueqi_1 = x.xueqi.substr(0, 4);
          x.xueqi_2 = x.xueqi.substr(4);
          console.log(x.xueqi_1, x.xueqi_2);
          tmpCheckedForBatchPrint.kckh.push(x);
        }
        // console.log("ksfxbChecked =>", x.ksfxbChecked);
        if (true == x.ksfxbChecked) {
          tmpCheckedForBatchPrint.ksfxb.push(x);
        }
        // console.log("mtjhChecked =>", x.mtjhChecked);
        if (true == x.mtjhChecked) {
          tmpCheckedForBatchPrint.mtjh.push(x);
        }
        // console.log("sjcfmChecked =>", x.sjcfmChecked);
        if (true == x.sjcfmChecked) {
          tmpCheckedForBatchPrint.sjcfm.push(x);
        }
        // console.log("sjdfpChecked =>", x.sjdfpChecked);
        if (true == x.sjdfpChecked) {
          tmpCheckedForBatchPrint.sjdfp.push(x);
        }
        // console.log("sycpChecked =>", x.sycpChecked);
        if (true == x.sycpChecked) {
          tmpCheckedForBatchPrint.sycp.push(x);
        }
        // console.log("zpcjdChecked =>", x.zpcjdChecked);
        if (true == x.zpcjdChecked) {
          tmpCheckedForBatchPrint.zpcjd.push(x);
        }
      }
      console.log("tmpCheckedForBatchPrint =>", tmpCheckedForBatchPrint);
      this.checkedForBatchPrint = tmpCheckedForBatchPrint;
      if (null != val) {
        val.call(null, tmpCheckedForBatchPrint);
      }
    },
    pyccselect() {
      let code = "pylevel";

      return new Promise(() => {
        pyccselect(code).then(res => {
          this.ppccList = res.data.data[0].children;
          console.log(res.data.data[0].children, "pyccselect");
        });
      });
    },
    // 获取学期院历列表
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    exportClick() {
      let Base64 = require('js-base64').Base64;
      let arr=[]

      for (const tableKey in this.tableData) {
        let obj = {}
        let table = this.tableData[tableKey]
        obj.id = table.id
        obj.sjcfmChecked = table.sjcfmChecked ? table.sjcfmChecked : false;
        obj.kckhChecked = table.kckhChecked ? table.kckhChecked : false;
        obj.kckhssjhChecked = table.kckhssjhChecked ? table.kckhssjhChecked : false;
        obj.mtjhChecked = table.mtjhChecked ? table.mtjhChecked : false;
        obj.kcdjbChecked = table.kcdjbChecked ? table.kcdjbChecked : false;
        obj.sycpChecked = table.sycpChecked ? table.sycpChecked : false;
        obj.sjdfpChecked = table.sjdfpChecked ? table.sjdfpChecked : false;
        obj.abjChecked = table.abjChecked ? table.abjChecked : false;
        obj.daChecked = table.daChecked ? table.daChecked : false;
        obj.dtjChecked = table.dtjChecked ? table.dtjChecked : false;
        obj.sjfxbChecked = table.sjfxbChecked ? table.sjfxbChecked : false;
        obj.ksfxbChecked = table.ksfxbChecked ? table.ksfxbChecked : false;

        obj.zpcjdChecked = table.zpcjdChecked ? table.zpcjdChecked : false;
        arr.push(obj)

      }
      let obj1 = JSON.stringify(arr)
      console.log(obj1)
      let str = Base64.encode(obj1)
      console.log(str)
      // http://localhost:4444/materialDownload/download
      let href = window._CONFIG.previewurl + `/materialDownload/download?str=${str}`;

      window.open(href, '_blank');

    },
    async querySelPrint() {
      let obj = {
        xueqi: this.xq,
        level: this.level,
        xxtype: this.xxtype,
        status: this.status,
        coursecharge: this.coursecharge,
        coursename: this.course
      }
      getSelectConditionPrint(obj).then(res => {
        let tmpTableData = [];
        for(let tmpRowData of res.data.data) {
          tmpRowData.xueqi_1 = tmpRowData.xueqi.substr(0, 4);
          tmpRowData.xueqi_2 = tmpRowData.xueqi.substr(4);
          tmpRowData.id_sjcfm = "print-test-book-cover-" + tmpRowData.id;
          tmpRowData.id_kckh = "print-assessment-implementation-plan-" + tmpRowData.id;
          tmpRowData.id_mtjh = "print-proposition-plan-" + tmpRowData.id;
          tmpRowData.id_kcdjb = "print-examination-room-registration-form-" + tmpRowData.id;
          tmpRowData.id_sycp = "print-delivery-of-summons-" + tmpRowData.id;
          tmpRowData.id_sjdfp = "print-test-paper-bag-cover-" + tmpRowData.id;
          tmpRowData.id_ksfxb = "print-test-paper-analysis-form-" + tmpRowData.id;
          tmpRowData.id_zpcjd = "print-general-evaluation-report-" + tmpRowData.id;
          if (null != tmpRowData.planEntity) {
            if (null != tmpRowData.planEntity.opinions) {
              if (null != tmpRowData.planEntity.opinions.secret) {
                let tmpOptions = [];
                tmpOptions.push(tmpRowData.planEntity.opinions.secret);
                tmpRowData.planEntity.opinions.secret = tmpOptions;
              }
              if (null != tmpRowData.planEntity.opinions.ab) {
                let tmpOptions = [];
                tmpOptions.push(tmpRowData.planEntity.opinions.ab);
                tmpRowData.planEntity.opinions.ab = tmpOptions;
              }
            }
          }
          if (null != tmpRowData.sendprinting) {
            if (null != tmpRowData.sendprinting.sendtime) {
              tmpRowData.sendprinting.sendtime = tmpRowData.sendprinting.sendtime.substr(0, 10);
            }
            if (null != tmpRowData.sendprinting.awaytime) {
              tmpRowData.sendprinting.awaytime = tmpRowData.sendprinting.awaytime.substr(0, 10);
            }
          }
          if (null != tmpRowData.sexamination) {
            if (null != tmpRowData.sexamination.gjd) {
              tmpRowData.sexamination.gjd = parseInt(tmpRowData.sexamination.gjd);
            }
            if (null != tmpRowData.sexamination.dsf) {
              tmpRowData.sexamination.dsf = parseInt(tmpRowData.sexamination.dsf);
            }
          }
          tmpTableData.push(tmpRowData);
        }
        console.log("tmpTableData xxx =>", tmpTableData);
        if(tmpTableData.length <= 0){
          this.$message({
            type:'info',
            message:'暂无数据！'
          })
          return
        }
        this.tableData = tmpTableData;
      })
    },
    selectCheck2(choose) {
      console.log("selectCheck2 =>", choose);
      if ("all" === choose) {
        console.log();
      } else {
        switch(choose) {
          case "all":
            break;
        }
      }
      this.selectCheck(choose);
    },
    itemChange2(pageType, index) {
      console.log("pageType =>", pageType, ", index =>", index);
      console.log("itemChange2", this.checkedForBatchPrint);
      this.itemChange(pageType, index);
    },
    itemChange(string, index) {
      let arr = ["sjcfm", "kckh", "mtjh", "kcdjb", "sycp",
        "sjdfp", "abj", "da", "dtj", 'ksfxb', "zpcjd"]
      let obj = this.tableData[index]
      this[string + "ColumnChecked"] = this.tableData.every((item) => {
        return item[string + "Checked"];
      });
      if (string === "row") {
        console.log(obj)
        let isflag = obj[string + "Checked"]

        for (const arrKey in arr) {
          obj[arr[arrKey] + "Checked"] = isflag
          this[arr[arrKey] + "ColumnChecked"] = this.tableData.every((item) => {
            return item[arr[arrKey] + "Checked"];
          });
        }
      } else {
        for (const arrKey in arr) {
          if (!obj[arr[arrKey] + 'Checked']) {
            obj['rowChecked'] = false
            this.rowColumnChecked = false
            return
          } else {
            obj['rowChecked'] = true
            this.rowColumnChecked = true
          }
        }
      }
      console.log(string + "ColumnChecked")
      console.log(string + "Checked")
    },
    itemClick(position, index) {
      console.log(position, index)
      this.currentDialogModel = this.tableData[index];
      this.previewDialogType = position;
      this.previewDialogVisible = true;
      switch(position) {
        case "abj":
          this.previewDialogTitle = "预览：AB卷";
          break;
        case "da":
          this.previewDialogTitle = "预览：答案及评分标准";
          break;
        case "dtj":
          this.previewDialogTitle = "预览：答题卷";
          break;
        default:
          break;
      }
    },
    blankckck(position,id,blank){
      let href = window._CONFIG.previewurl + `/materialDownload/line?id=${id}&position=${position}`;
      // window.location.href=href;
      window.open(href, blank);
    },
    handleDialogPreviewClick(position) {
      let href = window.location.origin + `/api/xpaas-course-service/testpaperandprint/line?id=${this.currentDialogModel.id}&position=${position}`;
      window.open(href, "_blank");
    },
    selectCheck(choose) {
      let arr = ["sjcfm", "kckh", "mtjh", "kcdjb", "sycp",
        "sjdfp", "abj", "da", "dtj", 'ksfxb', "zpcjd"]
      if (choose) {
        if (choose === "all") {
          let isflag = this["rowColumnChecked"]

          for (const arrKey in arr) {
            this[arr[arrKey] + "ColumnChecked"] = isflag
            this.tableData = this.tableData.map((item) => {
              return {
                ...item,
                [arr[arrKey] + "Checked"]: this[arr[arrKey] + "ColumnChecked"],
              };
            });
          }
          this.tableData = this.tableData.map((item) => {
            return {...item, rowChecked: this.rowColumnChecked};
          });

        } else {
          for (const arrKey in arr) {
            this.tableData = this.tableData.map((item) => {
              return {
                ...item,
                [choose + "Checked"]: this[choose + "ColumnChecked"],
              };
            });
            if (!this[arr[arrKey] + 'ColumnChecked']) {
              this.rowColumnChecked = false

              for (const Key in this.tableData) {
                this.tableData[Key]['rowChecked'] = false
              }

              return
            } else {
              this['rowColumnChecked'] = true

            }

          }

        }
      }
    },
    changeInputFile() {
      document.getElementById("theFile").click();
      document.getElementById("theFile").onchange = (event) => {
        this.filepath = event.target.value;
      };
    },
  },
};
</script>

<style lang="less" scoped>
.item_btn {
  width: 55px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.paperprint-container {
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;

      .el-radio {
        margin-right: 79px;
      }
    }

    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }

  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;

      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }

        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }

        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;

          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;

            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }

          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 76px;

      .green {
        padding: 1px 17px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/paper-print.less";
</style>
